<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="css/jquery.lightTreeview.css" rel="stylesheet" type="text/css" />
<script src="../../../js/jquery/jquery-1.3.2.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.lightTreeview.js"></script>
<script type="text/javascript">
$(function() {
	$('#demo1').lightTreeview();
	$('#demo2').lightTreeview({
		collapse: true,
		line: true,
		nodeEvent: false,
		unique: true,
		style: 'red',
		animate: 0
	});
	$('#demo3').lightTreeview({
		collapse: true,
		line: true,
		nodeEvent: true,
		unique: true,
		style: 'black',
		animate: 400
	});
	$('#demo4').lightTreeview({
		collapse: true,
		line: true,
		nodeEvent: true,
		unique: false,
		style: 'gray',
		animate: 100,
		fileico: true,
		folderico: true
	});
});
</script>
<style type="text/css">
body {
	font-size: 12px;
	font-family: "宋体";
}
pre {
	font-family: Courier New;
	font-size: 14px;
	border:#CCCCCC 1px solid;
	padding:3px;
	background-color: #E0FBFA;
}
p {
	line-height: 150%;
	margin: 0;
}
.btn {
	cursor: pointer;
	color: #0066FF;
}
.exp {
	font-family: "Courier New","宋体";
	font-size: 12px;
	color: gray;
}
</style>
</head>

<body>
<h2>Demo1</h2>
<ul id="demo1" class="lightTreeview">
	<li><div>北京</div></li>
	<li>
		<div>浙江</div>
		<ol>
			<li>
				<div>杭州</div>
				<ul>
					<li><div>上城区</div></li>
					<li><div>下城区</div></li>
					<li><div>江干区</div></li>
					<li><div>西湖区</div></li>
				</ul>
			</li>
			<li><div>宁波</div></li>
			<li><div>绍兴</div></li>
		</ol>
	</li>
	<li>
		<div>广东</div>
		<ul>
			<li><div>广州</div></li>
			<li><div>湛江</div></li>
			<li><div>佛山</div></li>
		</ul>
	</li>
	<li><div>上海</div></li>
</ul>

<h2>Demo2</h2>
<ul id="demo2" class="lightTreeview">
	<li>北京</li>
	<li>
		<div>浙江</div>
		<ol style="display:none">
			<li>
				<div>杭州</div>
				<ul>
					<li>上城区</li>
					<li>下城区</li>
					<li>江干区</li>
					<li>西湖区</li>
				</ul>
			</li>
			<li>宁波</li>
			<li>绍兴</li>
		</ol>
	</li>
	<li>
		<div>广东</div>
		<ul>
			<li>广州</li>
			<li>湛江</li>
			<li>佛山</li>
		</ul>
	</li>
	<li>上海</li>
</ul>
<h2>Demo3</h2>
<ul id="demo3" class="lightTreeview treeview-black">
	<li><div class="treeview-file">北京</div></li>
	<li>
		<div class="treeview-folder">浙江</div>
		<ol>
			<li>
				<div class="treeview-folder">杭州</div>
				<ul style="display:none">
					<li><div class="treeview-file">上城区</div></li>
					<li><div class="treeview-file">下城区</div></li>
					<li><div class="treeview-file">江干区</div></li>
					<li><div class="treeview-file">西湖区</div></li>
				</ul>
			</li>
			<li><div class="treeview-file">宁波</div></li>
			<li><div class="treeview-file">绍兴</div></li>
		</ol>
	</li>
	<li>
		<div class="treeview-folder">广东</div>
		<ul style="display:none">
			<li><div class="treeview-file">广州</div></li>
			<li><div class="treeview-file">湛江</div></li>
			<li><div class="treeview-file">佛山</div></li>
		</ul>
	</li>
	<li><div class="treeview-file">上海</div></li>
</ul>
<h2>Demo4</h2>
<ul id="demo4">
	<li><div>北京</div></li>
	<li>
		<div>浙江</div>
		<ol>
			<li>
				<div>杭州</div>
				<ul style="display:none">
					<li><div>上城区</div></li>
					<li><div>下城区</div></li>
					<li><div>江干区</div></li>
					<li><div>西湖区</div></li>
				</ul>
			</li>
			<li><div>宁波</div></li>
			<li><div>绍兴</div></li>
		</ol>
	</li>
	<li>
		<div>广东</div>
		<ul style="display:none">
			<li><div>广州</div></li>
			<li><div>湛江</div></li>
			<li><div>佛山</div></li>
		</ul>
	</li>
	<li><div>上海</div></li>
</ul>
</body>
</html>
